import React, { useState } from 'react';
import { history } from 'umi';
import {
  Form,
  Input,
  Button,
  message,
  Row,
  Col,
  Checkbox,
  Spin
} from 'antd';
import {
  UserOutlined,
  LockOutlined,
} from '@ant-design/icons';
import './index.less';
import request from '../../http';
import logo_1 from '@/images/logo_1.png';
import SecurityService from './service';

export default function index() {

  const formItemLayout = {
    wrapperCol: {
      span: 18,
      offset: 3,
    },
    labelCol: {
      span: 18,
      offset: 3,
    },
  };

  const [formObject] = Form.useForm(); //获取数据

  const onFinish = async (values: any) => {
    setspinning(true);
    await request.post('api/User/Login'+'?account='+values.userNo+'&password='+values.password)
    .then((response: any)=>{
      console.log(response);
      if (response.code == '200') {
        setspinning(false);
        SecurityService.saveSecurity({id:response.data.id,name:response.data.userName,token:response.data.token})
        history.push('/admin/studentInformation');
      }else {
        setspinning(false);
        message.error(response.message);
      }
    })
  };
  const [spinning, setspinning] = useState(false);
  return (
    <div id="login" style={{ minWidth: 1200, minHeight: 800 }}>
      <Row justify="center">
        <Col span={24} id="ant-row_1"></Col>
        <Col id="ant-row_2_1" span={7} offset={11}>
          <Col span={12} offset={2} style={{ marginTop: 35 }}>
            <img src={logo_1} />
          </Col>
          <Col span={18} offset={3}>
            <h2>重庆工程学院报修后台管理系统</h2>
          </Col>
          <Spin spinning={spinning} size="large">
          <Col span={24} offset={2}>
            <Form
              {...formItemLayout}
              name="normal_login"
              className="login-form"
              initialValues={{ roleType: '1', remember: true }}
              onFinish={onFinish}
              form={formObject}
            >
              <Form.Item
                name="userNo"
                rules={[{ required: true, message: '请输入你的账号!' }]}
              >
                <Input
                  prefix={<UserOutlined className="site-form-item-icon" />}
                  placeholder="账号"
                />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入你的密码!' }]}
              >
                <Input.Password
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  placeholder="密码"
                />
              </Form.Item>
              <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox>记住密码</Checkbox>
                </Form.Item>
                <a
                  className="login-form-forgot"
                  href="#"
                  onClick={() => {
                    message.error('请联系管理员');
                  }}
                >
                  忘记密码
                </a>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" id="loginButton">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Col>
          </Spin>
        </Col>
        <Col style={{ marginTop: '6vh' }}>
          <p>
            Copyright 重庆工程学院 版权所有 渝ICP备09014106 渝公网安备
            50011302000724号(建议使用IE9以上浏览器)
          </p>
        </Col>
      </Row>
    </div>
  );
}
